
<template>
  <div v-if="locationInfo" class="upload-container">
    <!-- 勾选 -->
    <div class="select-condition">
      <div class="title-block">
        <h1 class="title">请根据实际情况勾选</h1>
      </div>
      <select-bar :options="selectOption" @handleSelectDesc="handleSelectDesc" />
    </div>
    <!-- 问题说明 -->
    <div class="ipt-description-block">
      <div class="title-block">
        <h1 class="title">其他问题说明</h1>
      </div>
      <div class="textarea-description w-100 bg-white">
        <textarea class="textarea w-100" :placeholder="descriptionPlaceholder" v-model="descriptionValue"
                  placeholder-style="color:#9DBEA4;font-weight:300;" :maxlength="200" :cursor-spacing="100"
                  @input="onChangeDescValue" @focus="onFocus" @blur="onBlur"></textarea>
        <div v-if="discriptionCounterCount" class="counter-block flex-c fs-md">
          {{discriptionCounterCount}}/200
        </div>
      </div>
    </div>
    <!-- 上传图片 -->
    <div class="upload-photo">
      <div class="title-block d-flex ai-end">
        <h1 class="title">添加图片</h1>
        <h2 class="tip fs-sm">（选填，提供实地照片）</h2>
      </div>
      <div class="photo-block d-flex flex-wrap bg-white">
        <div class="photo-item" v-for="(item, i) in locImages" :key="i">
          <img class="photo" :src="item.local || img.preview" mode="aspectFill" @tap="handleImagePreview(i)">
          <div class="delete-btn flex-c bg-black" @tap="handleRemoveImage(i)"><img src="/static/icon/close-i.png"></div>
        </div>
        <button v-if="locImages.length < 9" class="add-btn" @tap="handleChooseImage">
          <div class="add-inner"><img src="/static/icon/photo.png" class="position-center"></div>
        </button>
      </div>
    </div>
    <button class='confirm-btn' @tap="handleConfirm">确认</button>
    <upload-tip v-if="uploadStatus" :status="uploadResultStatus" />
  </div>
</template>
<script>
import SelectBar from "./components/Select";
import UploadTip from "@/components/UploadTip";
import UploadImage from "@/mixin/uploadImage";
export default {
  components: { SelectBar, UploadTip },
  mixins: [UploadImage],
  data() {
    return {
      id: "",
      locationInfo: null,
      descriptionPlaceholder: "可以简单介绍一下您遇到的问题，以供其他有障碍者参考（字数200字以内）",
      discriptionCounterCount: 0,
      selectOption: [],
      descriptionValue: "",
      locImages: [],
      uploadStatus: false,
      uploadResultStatus: true
    };
  },
  computed: {
    openid() {
      return this.$store.getters.openid
    },
    activeOptions() {
      if (!this.selectOption.length) return;
      let arr = [];
      const activeArr = this.selectOption.map(item => {
        if (item.select) {
          arr.push(item);
        }
      });
      return arr;
    },
    facilityList() {
      return this.$store.state.upload.userFacilityList
    }
  },
  async mounted() {
    this.id = this.$store.state.upload.uploadTypeId
    this.locationInfo = this.$store.state.upload.uploadLocationInfo
    this.getOptions()
  },
  methods: {
    // 上传信息
    async handleConfirm() {
      if (this.activeOptions.length) {
        const res = await this.$tip.confirm(
          "是否确定提交？",
          "感谢您的提供的信息"
        );
        if (res) {
          const upload = await this.uploadInfo()
          if (upload) {
            this.uploadResultStatus = this.uploadStatus = true
            setTimeout(() => {
              this.$router.push({
                path: "/pages/upload/pickType",
                reLaunch: true
              });
            }, 2000);
          } else {
            this.uploadResultStatus = false
            this.uploadStatus = true;
          }
        }
      } else {
        this.$tip.toast("请根据实际情况勾选选项");
      }
    },
    async uploadInfo() {
      const updateImages = await this.handleUploadImage(this.locImages, `${this.id}_${new Date().getTime()}.jpg`, { wxOpenId: this.openid });
      const { retCode } = await this.$http.uploadFacilityInfo({
        wxOpenId: this.openid,
        name: this.locationInfo.name,
        describe: this.descriptionValue,
        categoryId: this.id,
        tags: this.activeOptions.map(item => item.tag_id),
        long: this.locationInfo.longitude,
        lat: this.locationInfo.latitude,
        images: updateImages,
        province: this.locationInfo.province,
        city: this.locationInfo.city,
        county: this.locationInfo.city,
        district: this.locationInfo.district,
        address: this.locationInfo.address
      })
      if (retCode === 0) {
        return true
      } else {
        return false
      }
    },
    getOptions() {
      if (!this.id) return;
      let options = [];
      this.facilityList.map(item => {
        if (item.id == this.id) {
          options = item.template;
        }
      });
      options.map(item => {
        this.$set(item, "select", false);
      });
      this.selectOption = options;
    },
    onFocus() {
      this.descriptionPlaceholder = "";
    },
    onBlur() {
      if (!this.descriptionValue) {
        this.descriptionPlaceholder = "可以简单介绍一下您遇到的问题，以供其他有障碍者参考（字数200字以内）";
      }
    },
    handleSelectDesc(index) {
      this.selectOption[index].select = !this.selectOption[index].select;
    },
    onChangeDescValue(e) {
      this.discriptionCounterCount = e.mp.detail.value.length;
    }
  },
  onShareAppMessage() {
    return this.$shareDefInfo;
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "./index.scss";
</style>